<template>
  <BKMutableContainer
    left-width="30%"
    right-width="40%"
    class="bg-white"
  >
    <template #left>
      <MenuTree @node-click="handleMenuClick" />
    </template>
    <div class="full-box p-a-mini d-flex-c">
      <div
        class="config-tree-search flex-0"
      >
        <el-input
          size="small"
          prefix-icon="el-icon-search"
          placeholder="输入关键字进行过滤"
          v-model="keyword"
          clearable
          class="m-b-mini"
        />
      </div>
      <BKTree
        ref="tree"
        :mock="treeData"
        node-key="id"
        @node-click="handleNodeClick"
        class="bk-tree-wrapper dept-tree p-t-mini flex-1 overflow-hidden"
        has-line
        :filter-node-method="filterNode"
      />
    </div>
    <template #right>
      <ConfigGrid
        ref="grid"
        :configs="gridConfigs"
        :has-add="false"
        :has-batch-remove="false"
        :has-checkbox="false"
      >
        <template #toolbarLeftPrepend>
          <div class="d-flex ai-c">
            <el-button
              size="small"
              type="success"
              @click="batchPass(1)"
            >
              一键通过
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="batchPass(0)"
            >
              一键不通过
            </el-button>
          </div>
        </template>
      </ConfigGrid>
    </template>
    <BKModal
      v-model="visible"
      title="设置截止日期"
      width="300px"
      height="200px"
    >
      <div class="full-box d-flex-c ai-c jc-c p-a-mini">
        <div class="flex-1 overflow-hidden ai-c jc-c d-flex-c">
          <div class="full-width m-b-mini">
            <el-switch
              v-model="longTimeAuth"
              @change="changeLongTimeAuth"
              size="mini"
              active-text="永久权限"
            />
          </div>
          <el-date-picker
            v-model="deadline"
            size="mini"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            :disabled="longTimeAuth"
            :clearable="false"
          />
        </div>
        <el-button
          type="primary"
          size="mini"
          @click="confirmDeadline"
        >
          确认
        </el-button>
      </div>
    </BKModal>
  </BKMutableContainer>
</template>

<script>
import MenuTree from './menu-tree.vue'

export default {
  name: 'Audit',
  data () {
    return {
      deptConfigs: {
        dictionaryKeys: ['DIC_WATF_B_UP_D'],
        activeNodeKey: this.$store.state.user.userInfo.DEPT_ID,
        includeSelf: true,
        canSortItem: false,
        sortKeyProps: { id: 'DEPT_ID', fid: 'PARENT_ID', order: 'ORDER_NUM' },
        hasIcon: false,
        canSwitchBzCode: false,
        appId: 'watf',
        bzCode: 'WATF',
        async: true,
        treeConfigId: 'DEPT_TREE',
        hasAdd: false
      },
      gridConfigs: {
        appId: 'YSJC',
        bzCode: 'YSJC',
        isView: true,
        viewCode: 'YSQJC_QXSHGL_VIEW',
        noOperation: true,
        afterFetchColumns: this.afterFetchColumns
      },
      treeData: [],
      keyword: '',
      deadline: '',
      visible: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      longTimeAuth: false
    }
  },
  components: {
    MenuTree
  },
  mounted () {
    this.getTreeData()
  },
  watch: {
    keyword (val) {
      this.$refs.tree.$refs.tree.filter(val)
    }
  },
  methods: {
    async getTreeData () {
      this.treeData = await this.$request.post('ysjc/user/initQxshInfo', {})
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },
    handleNodeClick (data) {
      console.log(data)
      this.currentNode = data
      this.getTableData()
    },
    handleMenuClick ({ data, level }) {
      this.level = level
      console.log(data)
      this.currentMenu = data
      this.getTableData()
    },
    getTableData () {
      if (!this.currentNode || !this.currentMenu) return
      this.$refs.grid.refreshList({ DEPT_ID: this.currentNode.id, MENU_ID: this.currentMenu.id, APPROVAL_LEVEL: this.level })
    },
    afterFetchColumns (columns) {
      columns.push({
        title: '审核是否通过',
        width: 120,
        fixed: 'right',
        slots: {
          default: ({ row }) => {
            return [
              <el-switch vModel={row.YSQJC_PW_USER_MENU$EXAMINE_TYPE} active-value="1" inactive-value="0" vOn:change={(v) => this.changeSwitch(row, v)}></el-switch>
            ]
          }
        }
      }, {
        title: '操作',
        width: 100,
        fixed: 'right',
        slots: {
          default: ({ row }) => {
            return [
              row.YSQJC_PW_USER_MENU$EXAMINE_TYPE === '1' ? <i class="el-icon-setting c-pointer f-16 c-blue" title="设置截止日期" vOn:click={() => this.openDeadlineModal(row)}></i> : <div></div>
            ]
          }
        }
      })
      return columns
    },
    async changeSwitch (row, value) {
      // await this.$request.singleTableOperation({
      //   metaSet: 'YSQJC_PW_USER_MENU',
      //   methodCode: 'update',
      //   methodParams: {
      //     USER_ID: row.WATF_B_SYS_USER$USER_ID,
      //     MENU_ID: row.YSQJC_PW_USER_MENU$MENU_ID,
      //     EXAMINE_TYPE: value,
      //     MENU_LEVEL: this.level
      //   }
      // })
      if (value === '0') {
        row.YSQJC_PW_USER_MENU$DEADLINE_TIME = ''
      }
      await this.$request.post('/ysjc/user/authorityReview', {
        USER_ID: row.WATF_B_SYS_USER$USER_ID,
        MENU_ID: row.YSQJC_PW_USER_MENU$MENU_ID,
        EXAMINE_TYPE: value,
        MENU_LEVEL: this.level
        // DEADLINE_TIME: row.YSQJC_PW_USER_MENU$DEADLINE_TIME || ''
      })
      this.$message.success('操作成功')
      if (value === '1') {
        this.openDeadlineModal(row)
      }
    },
    batchPass (type) {
      this.$confirm(`请确认是否一键${type === 1 ? '' : '不'}通过所有审核？`, '提示', { type: 'warning' }).then(async () => {
        await this.$request.post('/ysjc/user/updateUserMenu', {
          MENU_ID: this.currentMenu.id,
          EXAMINE_TYPE: type === 1 ? '1' : '0',
          DEPT_ID: this.currentNode.id,
          APPROVAL_LEVEL: this.level
        })
        this.$message.success('操作成功')
        this.getTableData()
      })
    },
    openDeadlineModal (row) {
      this.rowData = row
      this.longTimeAuth = !row.YSQJC_PW_USER_MENU$DEADLINE_TIME
      this.deadline = row.YSQJC_PW_USER_MENU$DEADLINE_TIME
      this.visible = true
    },
    changeLongTimeAuth (v) {
      if (v) {
        this.deadline = ''
      }
    },
    async confirmDeadline () {
      await this.$request.singleTableOperation({
        metaSet: 'YSQJC_PW_USER_MENU',
        methodCode: 'update',
        methodParams: {
          USER_ID: this.rowData.WATF_B_SYS_USER$USER_ID,
          MENU_ID: this.rowData.YSQJC_PW_USER_MENU$MENU_ID,
          DEADLINE_TIME: this.deadline,
          MENU_LEVEL: this.level
        }
      })
      // await this.$request.post('/ysjc/user/authorityReview', {
      //   USER_ID: this.rowData.WATF_B_SYS_USER$USER_ID,
      //   MENU_ID: this.rowData.YSQJC_PW_USER_MENU$MENU_ID,
      //   EXAMINE_TYPE: this.rowData.YSQJC_PW_USER_MENU$EXAMINE_TYPE,
      //   MENU_LEVEL: this.level,
      //   DEADLINE_TIME: this.deadline
      // })
      this.$message.success('保存成功')
      this.$refs.grid.refresh()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .dept-tree .is-current > .el-tree-node__content > .el-tree-node__label {
    color: #fff;
    background: #f2ba13;
    border-radius: 3px;
    padding: 2px 4px;
  }
</style>
